<template>
    <div class="canvas">
        <canvas width=500 height=500 id="gauge1"></canvas>
        <canvas width=500 height=500 id="gauge2"></canvas>
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
</template>

<script>
import '@/utils/dashboard.js'
export default {
    name: '',
	data () {
		return {
			
		}
	},
    mounted(){
        this.draw(100,Math.PI*19/22);
        this.startCanvas1();
        this.startCanvas2();

        setInterval(()=>{
            this.startCanvas1()
            this.startCanvas2()
        },2500)
    },
    methods:{
        startCanvas1(){
            var my_canvas_obj1= document.getElementById("gauge1");
            var gauge1 = new Gauge({
                "total_tick": 41,
                "tick_color": "#666",
                "num_gap": 50, // 每个刻度之间的间隔值，计算显示数字时需要,目标值2000，刻度100份，每份间隔20
                "show_num":true,
                "show_center_num": false,
                "type": "outer",
                on_color_gradient: [
                {
                    color: "#ddb834",
                    percent: 0
                },
                {
                    color: "#b5544b",
                    percent: 100
                }
                ],
                "canvas": my_canvas_obj1
            })

            gauge1.render()
            gauge1.updatePercent(100)
        },
        startCanvas2(){
            var my_canvas_obj2= document.getElementById("gauge2");
            var gauge2 = new Gauge({
                "total_tick": 41,
                "tick_color": "#666",
                "num_gap": 0.025, // 每个刻度之间的间隔值，计算显示数字时需要,目标值2000，刻度100份，每份间隔20
                "show_num":true,
                "show_center_num": false,
                "type": "inner",
                on_color_gradient: [
                    {
                        color: "#82e942",
                        percent: 0
                    },
                    {
                        color: "#ddb834",
                        percent: 100
                    }
                ],
                "canvas": my_canvas_obj2
            })
            gauge2.render()
            gauge2.updatePercent(100)
        },
        draw(percent, sR){
            if (percent < 0 || percent > 100) {
                return;
            }
            if (sR < Math.PI/2 || sR >= 3/2 * Math.PI) {
                return;
            }

            var canvas = document.querySelector('#canvas'),
                cxt = canvas.getContext('2d'),
                cWidth = canvas.width,
                cHeight = canvas.height,
                PI = Math.PI,
                sR = sR || 1/2 * PI; // 默认圆弧的起始点弧度为π/2

            // 画渐变圆弧
            this.drawCanvas(cxt, cWidth/2, cHeight/2, 180, sR, sR + (PI + (PI - sR) * 2));
        },
        drawCanvas(cxt,x,y,r,sRadian,eRadian){
            cxt.beginPath();
            var linGrad = cxt.createLinearGradient(x-r-2, y, x+r+2, y);
            linGrad.addColorStop(0.0, '#ddb834');
            linGrad.addColorStop(1.0, '#b5544b');
            cxt.strokeStyle = linGrad;
            cxt.lineWidth = 2;
            cxt.arc(x, y, r, sRadian, eRadian, false);
            cxt.stroke();
        }
    }
}
</script>

<style lang="less" scoped>
.canvas{
    canvas{
        width: 500px;
        max-width:100%;
        margin: auto;
    }
    #gauge2 {
        position: absolute;
        top: 0px;
        left: 0;
    }
    #canvas{
        position: absolute;
        top: 0px;
        left: 0;
    }
}
</style>
